<template>
	<view class="game_detail_page">
		
		<puplic-nav titleTxt="游戏详情" :flag="isFlag" @update:puplicNavHeight='getPuplicNavHeight' />
		
		<view class="re"><image src="@/static/images/banner_03.png" class="wp100 vm"></image></view>
		
		<view class="mini_banner_list">
			<image src="@/static/images/banner_03.png" class="item_banner_size" v-for="(item, index) in 4" :key="index"></image>
		</view>
		
		<view class="pt24 pl20 pr20">
			
			<view class="tabs_ordere_list">
				
				<view class="item_tab" :class="currentIndex === item.id ? 'active' : ''" v-for="(item, index) in tabdata" :key="item.id" @click="handleTab(item.id)">
					<view class="tabs_text">
						<view class="txt_1">{{item.title}}</view>
					</view>
				</view>
				
			</view>
			
			<view class="mt20 game_area_block_1">
				
				<view class="flex_box aic">
					<view class="item ov">
						<view class="fs32 fwb cor_000 clamp_1">塞尔达 荒野之息</view>
					</view>
					<view class="ml10 df aic cor_000">
						<view class="fs28 fwb cor_000">95成新</view>
						<view class="ml25 fs56 fwb cor_F52">242</view>
						<view class="fs24">元</view>
					</view>
				</view>
				
				<view class="flex_box aic">
					<view class="item ov"><view class="fs32 lh40 fwb cor_000" style="width: 360rpx;">THE LEGEND OF ZELDA:BREATH OF THE WILD</view></view>
					<view class="df aic">
						
						<view class="df fldc aic">
							<image src="@/static/images/icon_11.png" class="img_3"></image>
							<view class="mt10 fs20 lh24 cor_666">想玩</view>
						</view>
						<view class="ml35 df fldc aic">
							<image src="@/static/images/icon_12.png" class="img_3"></image>
							<view class="mt10 fs20 lh24 cor_666">拥有</view>
						</view>
						<view class="ml35 re df fldc aic">
							<image src="@/static/images/icon_13.png" class="img_3"></image>
							<view class="mt10 fs20 lh24 cor_666">分享</view>
							<view class="share_btn_pos">
								<button open-type="share"></button>
							</view>
						</view>
						
					</view>
				</view>
				
				<view class="fs24 fwb cor_000">
					
					<view class="pt16 pb16 flex_box aic">
						<view class="mr10">回收说明：</view>
						<view class="item ov"><view class="">全区中文</view></view>
					</view>
					
					<view class="pt16 pb16 flex_box aic">
						<view class="mr10">回收说明：</view>
						<view class="item ov"><view class="">2017-03-03</view></view>
					</view>
					
					<view class="pt16 pb16 flex_box aic">
						<view class="mr10">主线时长：</view>
						<view class="item ov"><view class="">200.00小时</view></view>
					</view>
					
					<view class="pt16 pb16 flex_box aic">
						<view class="mr10">游戏人数：</view>
						<view class="item ov"><view class="">同屏多人1-1</view></view>
					</view>
					
					<view class="pt16 pb16 flex_box aic">
						<view class="mr10">官方中文：</view>
						<view class="item ov"><view class="">支持</view></view>
					</view>
					
					<view class="pt16 pb16 flex_box aic">
						<view class="mr10">游戏模式：</view>
						<view class="item ov"><view class="">电视/掌机/桌面</view></view>
					</view>
					
					<view class="pt16 pb16 flex_box aic">
						<view class="mr10">游戏类型：</view>
						<view class="item ov">
							<view class="df fw">
								<view class="game_label_1">支持</view>
								<view class="game_label_1">冒险</view>
								<view class="game_label_1">动作</view>
							</view>
						</view>
					</view>
					
				</view>
				
			</view>
			
			<!-- 历史价格 -->
			<view class="game_area_block_2">
				<view class="game_de_title">历史售价</view>
				<view class="chat_box_1" style="">
					<qiun-data-charts 
					  type="area"
					  :opts="areaOpts"
					  :chartData="chartData"
					/>
				</view>
				<image src="@/static/images/icon_14.png" class="img_game_pos" mode=""></image>
			</view>
			
			<!-- 订单评论 -->
			<view class="game_area_block_2">
				<view class="game_de_title">订单评论<text class="ml15">1234</text> </view>
				
				<view class="mt15 re">
					
					<view class="pt26 pb26 flex_box" :class="(commentData.length -1) !== index ? 'bb1' : ''" v-for="(item, index) in commentData" :key="index">
						<view class="re mr30"><image src="@/static/images/banner_01.png" class="comment_user_img"></image></view>
						<view class="item ov">
							<view class="flex_box aic">
								<view class="item ov">
									<view class="fs32 lh36"><text class="fwb cor_000">李伟</text><text class="ml50 fs20 cor_666">9-10  15:25</text> </view>
								</view>
								<view class="df aic">
									<image src="@/static/images/icon_15.png" class="img_4 vm"></image>
									<view class="ml10 fs20 cor_999">回收订单</view>
								</view>
							</view>
							<view class="mt10 fs20 lh28 cor_666">这张照片太赛博朋克了，喜欢喜欢，真是大爱了。向楼主学习了，希望继续楼主多发一些这样的照片，多多益善，爱了爱了~~</view>
						</view>
					</view>
					
				</view>
				<view class="more_comment_box">
					<view class="mr10">更多评论</view>
					<image src="@/static/images/icon_arw_6.png" class="img_1"></image>
				</view>
			</view>
			
		</view>
		
		<!-- 游戏介绍 -->
		<view class="mt32 re ">
			<view class="re pl24 pr24" style="z-index: 2;">
				
				<view class="flex_box aic">
					<view class="item ov">
						<view class="game_de_title">历史售价</view>
					</view>
					<view class="df aic">
						<view class="mr10 fs24 cor_000">展开</view>
						<image src="/static/images/icon_arw_4.png" class="img_1 vm"></image>
					</view>
				</view>
				<view class="mt20 fs24 lh34 cor_333">《塞尔达传说:荒野之息》是任天堂开发的系列重启作品，是真正的全开放世界，而非以前的种种限制，玩家可以从任何方向到达你想去的地方。本作中，林克从一开始就获得了所有道具能力，并且可以和世界中的各种要素进行互动。大自然的风火雷电都可以被利用，让林克的冒险有层出不穷的玩法。任天堂秉承系列优秀的品质，相信游戏不会让玩家失望。《塞尔达传说:荒野之息》中文版于2018年2月1日发售。玩家可以用繁体中文或简体中文享受至今为至从未经历过的冒险，已持有游戏的玩家预定能通过更新资料来追加游戏语言。</view>
				<view class="mt24 re">
					<image src="@/static/images/comment_img_2.png" class="vm wp100" mode="widthFix"></image>
				</view>
				
			</view>
			
			<image src="@/static/images/comment_img_1.png" class="comment_bg_pos" mode="widthFix"></image>
		</view>
		
		<!-- 购买须知 -->
		<view class="mt60 re pl24 pr24">
			<view class="fs32 fwb lh48 cor_000">购买须知</view>
			<view class="mt20 fs24 lh34">
				<text class="cor_666">平台均为二手卡带，游戏体验与全新完全一致，经过严格质检保证游戏可用、成色好，</text>
				<text class="fwb cor_333">顺丰发货，非偏远地区满2张包邮(健身环大冒险不包邮)发货:16点前下单当天发货，之后次日发货</text>
				<text class="fwb cor_F52">二手游戏不含金币。非国行SWITCH不能玩国行游戏。二手游戏不支持退换，买错游戏可走回收通道。</text>
			</view>
		</view>
		
		<!-- 回收流程 -->
		<view class="mt32 re pl24 pr24">
			<view class="fs32 fwb lh48 cor_000">回收流程</view>
			<view class="re">
				
				<view class="pt20 pb20 flex_box aic">
					<view class="re mr15"><image src="@/static/images/icon_hui_1.png" class="img_2 vm"></image></view>
					<view class="item ov">
						<view class="df aic">
							<view class="com_index_box">1</view>
							<view class="fs28 lh40 fwb cor_333">在线下单</view>
						</view>
						<view class="mt8 fs24 lh32 cor_333">点击下方【我要买/我要卖】，系统自动匹配买家</view>
					</view>
				</view>
				
				<view class="pt20 pb20 flex_box aic">
					<view class="re mr15"><image src="@/static/images/icon_hui_2.png" class="img_2 vm"></image></view>
					<view class="item ov">
						<view class="df aic">
							<view class="com_index_box">2</view>
							<view class="fs28 lh40 fwb cor_333">快递邮寄</view>
						</view>
						<view class="mt8 fs24 lh32 cor_333">您把游戏邮寄给我们并将快递单号填到订单中</view>
					</view>
				</view>
				
				<view class="pt20 pb20 flex_box aic">
					<view class="re mr15"><image src="@/static/images/icon_hui_3.png" class="img_2 vm"></image></view>
					<view class="item ov">
						<view class="df aic">
							<view class="com_index_box">3</view>
							<view class="fs28 lh40 fwb cor_333">结算打款</view>
						</view>
						<view class="mt8 fs24 lh32 cor_333">我们收货后质检无误先打款给您再发货给买家</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 回收要求 -->
		<view class="mt20 game_area_block_3">
			
			<view class="re">
				<view class="fs28 fwb lh40">回收要求</view>
				<view class="mt10 fs24 lh32">发任何快递都可以(拒收到付件)。多个订单可以发一个快递。48小时未寄出会自动取消订单。我店购买的光盘类如果造成划痕不回收</view>
			</view>
			
			<view class="mt36 re">
				<view class="fs28 fwb lh40">平台签收和打款</view>
				<view class="mt10 fs24 lh32">签收后质检，全程视频监控，质检无误立刻打款(打款价格以下单时的报价为基准，下单后涨跌无视)，如果您回收的快递单号填错了，请在快递签收之前修改，之后修改的需联系客服处理</view>
			</view>
			
			<view class="mt36 re">
				<view class="fs28 fwb lh40">重要的建议</view>
				<view class="mt10 fs24 lh32">非常建议您邮寄之前拍下清晰的照片做凭据，包括游戏卡带/光盘和外壳的正面、背面，以便因运输造成损伤时与快递公司索赔</view>
			</view>
			
		</view>
		
		<view class="operate_bottom_fix">
			<view class="flex_box aic">
				<view class="item ov">
					<view class="df aic tac">
						
						<view class="mr20">
							<image src="@/static/images/icon_16.png" class="img_3 vm"></image>
							<view class="mt5 fs20 lh24 cor_333">客服</view>
						</view>
						
						<view class="mr20">
							<image src="@/static/images/icon_17.png" class="img_3 vm"></image>
							<view class="mt5 fs20 lh24 cor_333">购物车</view>
						</view>
						
						<view class="mr20">
							<image src="@/static/images/icon_18.png" class="img_3 vm"></image>
							<view class="mt5 fs20 lh24 cor_333">回收箱</view>
						</view>
						
					</view>
				</view>
				<view class="com_btn_1 mr20">我要卖</view>
				<view class="com_btn_1">我要买</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	import PuplicNav from '@/components/puplicNav/index.vue';
	
	const stickyTop = ref(0);
	const isFlag = ref(false); //控制自定义导航栏背景色
	
	const currentIndex = ref(0);
	const tabdata = ref([
		{ id: 0, title: '游戏详情' },
		{ id: 1, title: '游戏评价' },
		{ id: 2, title: '价格历史' }
	]);
	
	const commentData = ref([
		{ id: 1 },
		{ id: 2 },
		{ id: 3 }
	]);
	
	const areaOpts = reactive({
		color: ["#E63749","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		padding: [35,0,0,0],
		enableScroll: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			axisLineColor: 'rgba(0,0,0,.1)',
			fontColor: '#999',
			fontSize: 10,
		},
		yAxis: {
			gridType: "solid",
			gridColor: 'rgba(0,0,0,.1)',
			data: [
				{
					type: 'value',
					axisLine: false,
					fontColor: '#999',
					fontSize: 10
				}
			]
			
		},
		extra: {
			area: {
				type: "straight",
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: false,
				activeType: "hollow"
			}
		}
	})
	
	const chartData = reactive({
		categories: ["一月","二月","三月","四月","五月","六月","七月"],
		series: [
			{
				name: "历史售价",
				format: 'yAxisDemo1',
				textColor: 'red',
				textSize: 10,
				data: [85,90,80,110,130,105,149]
			}
		]
	});
	
	const handleTab = (id) => {
		currentIndex.value = id;
	};
	
	const getPuplicNavHeight = (val) => {
		stickyTop.value = val;
	};
	
	onPageScroll((e) => {
		if(e.scrollTop >= 80) {
			isFlag.value = true;
		}else {
			isFlag.value = false;
		}
	});
	
</script>

<style lang="scss" scoped>
	
	.game_detail_page {
		position: relative;
		min-height: 100vh;
		padding-bottom: calc(150rpx + content(safe-area-inset-bottom));
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		background-color: #FCFCFC;
		.mini_banner_list {
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: 0 8rpx;
			margin-top: 16rpx;
			.item_banner_size {
				width: 176rpx;
				height: 128rpx;
				border-radius: 8rpx;
			}
		}
		.game_area_block_1 {
			position: relative;
			padding: 40rpx 28rpx;
			border-radius: 24rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 20rpx  rgba(0,0,0,.1);
			.game_label_1 {
				position: relative;
				width: 56rpx;
				height: 28rpx;
				line-height: 28rpx;
				font-size: 16rpx;
				color: #fff;
				text-align: center;
				background-color: #E66C78;
				border-radius: 6rpx;
				margin-right: 8rpx;
			}
		}
		.game_area_block_2 {
			position: relative;
			padding: 26rpx 28rpx;
			border-radius: 24rpx;
			background: #FFFFFF;
			border: 1px solid #FCEDED;
			margin-top: 52rpx;
			.chat_box_1 {
				position: relative;
				width: 100%;
				height: 380rpx;
				overflow: hidden;
			}
			.more_comment_box {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #fff;
				padding: 20rpx;
				background-color: #F5220F;
				border-radius: 0 24rpx 0 24rpx;
			}
		}
		
		.game_area_block_3 {
			position: relative;
			padding: 36rpx 24rpx;
			font-size: 24rpx;
			line-height: 32rpx;
			color: #fff;
			background-color: #343434;
		}
		
		.game_de_title {
			position: relative;
			font-size: 32rpx;
			line-height: 48rpx;
			padding-left: 8rpx;
			font-weight: bold;
			color: #000;
			border-left: 6rpx solid #F5220F;
		}
		.comment_user_img {
			position: relative;
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}
		.comment_bg_pos {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
			z-index: 1;
		}
		.com_index_box {
			position: relative;
			width: 24rpx;
			height: 24rpx;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 24rpx;
			background-color: #F5220F;
			border-radius: 50%;
			margin-right: 8rpx;
		}
		
		.share_btn_pos {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 2;
		}
		
		.img_game_pos {
			position: absolute;
			top: -32rpx;
			right: 10rpx;
			width: 158rpx;
			height: 158rpx;
			z-index: 2;
		}
		
		.operate_bottom_fix {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 22rpx 40rpx calc(22rpx + content(safe-area-inset-bottom));
			padding: 22rpx 40rpx calc(22rpx + env(safe-area-inset-bottom));
			background-color: #fff;
			z-index: 5;
			.com_btn_1 {
				position: relative;
				width: 196rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				background-color: #F5220F;
				border-radius: 8rpx;
			}
		}
		
	}

</style>
